<template>
  <section class="s22-bg lg:pt-20 text-center lg:pb-[75px] py-9">
    <div class="container mx-auto w-full kid-bg2 pb-14">
      <div class="lg:text-3xl text-xl font-bold">智慧幼儿园运营管理平台</div>
      <div class="lg:text-lg text-sm text-gray-66 lg:mt-4 mt-2">
        助力幼儿园集团标准化运营管理
      </div>
      <div
        class="
          lg:mt-10
          mt-4
          lg:mx-14
          mx-4
          shadow-[0px_20px_20px_0px_rgba(108,60,60,0.05)]
          rounded-lg
          lg:pt-[72px] lg:pb-14 lg:px-10
          pt-6
          pb-8
          grid
          lg:grid-cols-4
          grid-cols-2
          bg-white
          gap-y-4
        "
      >
        <this-card :icon="icon9">
          <template #title>招生运营</template>
          <template #content>
            <div>私域流量培育转化</div>
            <div>整合线上线下招生营销</div>
          </template>
        </this-card>

        <this-card :icon="icon10">
          <template #title>平安校园</template>
          <template #content>
            <div>通过安全巡检和智能监控</div>
            <div>将所有风险控制在可接受范围</div>
          </template>
        </this-card>

        <this-card :icon="icon11">
          <template #title>家园共育</template>
          <template #content>
            <div>通过生活故事+教育目标+家庭</div>
            <div>建议打造家园共育标准流程</div>
          </template>
        </this-card>

        <this-card :icon="icon12">
          <template #title>智慧考勤</template>
          <template #content>
            <span class="lg:block inline"
              >全流程、自动化的无感考勤管<span class="lg:inline hidden"
                >理平台</span
              >
            </span>
            <div>
              <span class="lg:hidden inline">理平台，</span>
              实时掌握出勤数据
            </div>
          </template>
        </this-card>
      </div>
    </div>
    <div class="mt-14 h-12 lg:flex hidden items-center justify-center">
      <el-button class="!w-60" type="primary" @click="$store.commit('SQ')"
        >免费获取方案</el-button
      >
      <el-button class="w-60 !ml-20" type="info" @click="$store.commit('SQ')"
        >免费试用平台</el-button
      >
    </div>
  </section>
</template>
  
  <script>
import icon9 from "@/assets/img/kid-icon9.png";
import icon10 from "@/assets/img/kid-icon10.png";
import icon11 from "@/assets/img/kid-icon11.png";
import icon12 from "@/assets/img/kid-icon12.png";
import thisCard from "./s22-card.vue";

export default {
  components: { thisCard },
  data() {
    return {
      icon9,
      icon10,
      icon11,
      icon12,
    };
  },
};
</script>
  
  <style scoped>
.s22-bg {
  background: linear-gradient(180deg, rgba(253, 253, 255, 0), #fafbfe);
}

.kid-bg2 {
  background-image: url("@/assets/img/kid-bg2.png");
  background-size: cover;
  background-repeat: no-repeat;
}
</style>